<template>
  <div class="map-container">
    <div id="map" ref="mapContainer"></div>
    <div class="control-panel">
      <button @click="toggleLines">{{ showLines ? '隐藏路线' : '显示路线' }}</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { setMapInstance } from '@/utils/mapUtils'

const mapContainer = ref<HTMLElement | null>(null)
let map: mapboxgl.Map | null = null
const showLines = ref(false)

// 示例线数据
const lines = {
  'type': 'FeatureCollection',
  'features': [
    {
      'type': 'Feature',
      'properties': {
        'name': '路线1',
        'description': '这是第一条路线'
      },
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [116.397428, 39.90923],
          [116.407428, 39.91923],
          [116.417428, 39.90923]
        ]
      }
    },
    {
      'type': 'Feature',
      'properties': {
        'name': '路线2',
        'description': '这是第二条路线'
      },
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [116.397428, 39.89923],
          [116.407428, 39.88923],
          [116.417428, 39.89923]
        ]
      }
    }
  ]
}

const initMap = () => {
  if (!mapContainer.value) return
  
  mapboxgl.accessToken = import.meta.env.VITE_APP_MAP_TOKEN
  
  map = new mapboxgl.Map({
    container: mapContainer.value,
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.397428, 39.90923],
    zoom: 12
  })

  map.on('load', () => {
    // 添加数据源
    map?.addSource('lines', {
      type: 'geojson',
      data: lines as GeoJSON.FeatureCollection
    })

    // 添加线图层
    map?.addLayer({
      id: 'lines-layer',
      type: 'line',
      source: 'lines',
      paint: {
        'line-color': '#2196f3',
        'line-width': 3,
        'line-opacity': 0.8,
        'line-dasharray': [2, 1]
      },
      layout: {
        'visibility': 'none',
        'line-join': 'round',
        'line-cap': 'round'
      }
    })

    // 添加线的标注图层
    map?.addLayer({
      id: 'lines-label',
      type: 'symbol',
      source: 'lines',
      layout: {
        'visibility': 'none',
        'text-field': ['get', 'name'],
        'text-size': 12,
        'symbol-placement': 'line-center',
        'text-offset': [0, 1]
      },
      paint: {
        'text-color': '#000000',
        'text-halo-color': '#ffffff',
        'text-halo-width': 2
      }
    })
  })

  setMapInstance(map)
}

const toggleLines = () => {
  showLines.value = !showLines.value
  const visibility = showLines.value ? 'visible' : 'none'
  
  if (map?.getLayer('lines-layer')) {
    map?.setLayoutProperty('lines-layer', 'visibility', visibility)
    map?.setLayoutProperty('lines-label', 'visibility', visibility)
  }
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  map?.remove()
  map = null
})
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

button {
  padding: 8px 16px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #34495e;
}
</style> 